<template>
	<view class="page-container">
		
		<!-- banner -->
		<view v-if="bannerList.length>0" class="banner">
			<swiper class="swiper" indicator-dots="true" indicator-color="rgba(255,255,255,.7)" duration="300" autoplay="true" interval="5000" indicator-active-color="#fff">
				<block v-for="item in bannerList" :key="item.id">
					<swiper-item>
						<image @click="toAds(item)" :src="item.adsrc" mode="aspectFill"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		
		<!-- 基础信息 -->
		<view class="hotel-info-wrapper">
			<view class="hotel-info-block">
				<view class="hotel-info-block__lf">
					<view class="hd">
						<text class="title">{{hotelDetail.title}}</text>
						<text class="more" @click="goToFacilities">设施·详情 <text class="iconfont">&#xe67f;</text></text>
					</view>
					<view class="decorate">
						<text class="label" v-if="hotelDetail.opentime">{{hotelDetail.opentime}}开业</text>
						<text class="label" v-if="hotelDetail.decoratetime">{{hotelDetail.decoratetime}}装修</text>
					</view>
					<view class="attr" v-if="hotelDetail.attr_list">
						<block v-for="(item, index) in hotelDetail.attr_list" :key="index">						
							<text class="label"><text class="iconfont">&#xe67b;</text>{{item.attrname}}</text>
						</block>
					</view>
				</view>
				<view class="hotel-info-block__rg" @click="jumpComment">
					<view class="score">{{hotelDetail.score}}</view>
					<sxRate :value="Math.round((hotelDetail.satisfyscore / 20))" :disabled="true" :max="5" fontSize="24rpx" activeColor="#ff8800"></sxRate>
					<view class="txt" v-if="hotelDetail.commentnum">{{hotelDetail.commentnum}}条评论</view>
					<view class="txt" v-else>暂无评论</view>
				</view>
			</view>
			<view class="address-info-block" v-if="hotelDetail.address" @click="mapLocation">
				<view class="hd"><text class="iconfont">&#xe6ef;</text></view>
				<view class="bd">{{hotelDetail.address}}</view>
				<view class="fd">
					<text class="iconfont">&#xe6ef;</text>
					<text class="txt">地图</text>
				</view>
			</view>
			<view class="adv-marketing-block" v-if="marketingBannerList.length">
				<view class="adv-marketing-block__l-con" v-if="marketingBannerList.length > 0">
					<image class="img" :src="marketingBannerList[0].adsrc" mode="aspectFill" @click="toAds(marketingBannerList[0])"></image>
				</view>
				<view class="adv-marketing-block__r-con" v-if="marketingBannerList.length > 1">
					<view class="t-item" v-if="marketingBannerList.length > 1">
						<image class="img" :src="marketingBannerList[1].adsrc" mode="aspectFill" @click="toAds(marketingBannerList[1])"></image>
					</view>
					<view class="b-item" v-if="marketingBannerList.length > 2">
						<image class="img" :src="marketingBannerList[2].adsrc" mode="aspectFill" @click="toAds(marketingBannerList[2])"></image>
						<image class="img" :src="marketingBannerList[3].adsrc" v-if="marketingBannerList.length > 3" mode="aspectFill" @click="toAds(marketingBannerList[3])"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 日期筛选 -->
		<view class="select-date-block" @click="calendar">
			<view class="select-date-block__bd">
				<view class="item">入住<text class="date">{{start_date}}</text></view>
				<view class="night">{{dayNum}}晚</view>
				<view class="item">离店<text class="date">{{end_date}}</text></view>
			</view>
			<view class="select-date-block__fd">
				<text class="iconfont">&#xe67f;</text>
			</view>
		</view>
		
		<view class="hotel-room-group">
			<block v-for="(item, index) in suitList" v-if="index < limit" :key="item.id">
				<view class="hotel-room-item">
					<view class="hotel-room-item__hd" @click="hotelPopup(item)">
						<image class="img" :src="item.litpic" mode="aspectFill"></image>
						<view class="info">
							<view class="title">{{item.title}}</view>
							<view class="attr">
								<text>
									<text class="label" v-if="item.roomarea">{{item.roomarea}}㎡</text>
									<text class="label" v-if="item.roomstyle">{{item.roomstyle}}</text>
									<text class="label" v-if="item.people_limit > 0">{{item.people_limit}}人入住</text>
								</text>
								<text v-if="item.roomarea || item.roomstyle || item.people_limit > 0" class="iconfont more">&#xe67f;</text>
							</view>
						</view>
					</view>
					<view class="hotel-room-item__bd">
						<view class="hotel-room-type" v-if="hasLogin">
							<view class="hotel-room-type__bd">
								<view class="tit">
									会员价
									<text class="label" v-if="item.pay_way == 1">线上支付</text>
									<text class="label" v-if="item.pay_way == 2">线下支付</text>
									<text class="label" v-if="item.pay_way == 3">线下、线上均支持</text>
									<text class="label" v-if="item.need_confirm == 1">需商家确认库存</text>
								</view>
								<view class="txt">
									<text class="bk has" v-if="item.breakfirst">有早</text>
									<text class="bk" v-else>无早</text>
									<text v-if="item.refund_restriction == 0">无条件退</text>
									<text v-if="item.refund_restriction == 1">不可退订</text>
								</view>
							</view>
							<view class="hotel-room-type__pd">
								<view class="price" v-if="item.discount_min_price > 0">{{globalExchangeRate}}<text class="num">{{item.discount_min_price}}</text>起</view>
								<view class="price" v-else>{{globalExchangeRate}}<text class="num">{{item.price}}</text>起</view>
								<view class="old-price">{{globalExchangeRate}}{{item.sellprice}}</view>
							</view>
							<view class="hotel-room-type__fd">
								<!-- #ifdef MP-ALIPAY -->
								<button class="yd" type="default" scope="userInfo" open-type="getAuthorize" @getAuthorize="goToBook(item)">预订</button>
								<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<button class="yd" type="default" @click="goToBook(item)">预订</button>
								<!-- #endif -->
								<!-- #ifdef MP-TOUTIAO || H5 -->
								<button class="yd" type="default" open-type="getUserInfo" @click="goToBook(item)">预订</button>
								<!-- #endif -->
								<view class="num" v-if="(item.sellprice - item.discount_min_price) > 0">
									已减
									<text v-if="item.discount_min_price == 0">{{item.sellprice - item.price}}</text>
									<text v-else>{{item.sellprice - item.discount_min_price}}</text>
								</view>
							</view>
						</view>
						<view class="hotel-room-type" v-else>
							<view class="hotel-room-type__bd">
								<view class="tit">
									支付立减价
									<text class="label" v-if="item.pay_way == 1">线上支付</text>
									<text class="label" v-if="item.pay_way == 2">线下支付</text>
									<text class="label" v-if="item.pay_way == 3">线下、线上均支持</text>
									<text class="label" v-if="item.need_confirm == 1">需商家确认库存</text>
								</view>
								<view class="txt">
									<text class="bk has" v-if="item.breakfirst">有早</text>
									<text class="bk" v-else>无早</text>
									<text v-if="item.refund_restriction == 0">无条件退</text>
									<text v-if="item.refund_restriction == 1">不可退订</text>
								</view>
							</view>
							<view class="hotel-room-type__pd">
								<view class="price">{{globalExchangeRate}}<text class="num">{{item.price}}</text>起</view>
								<view class="old-price">{{globalExchangeRate}}{{item.sellprice}}</view>
							</view>
							<view class="hotel-room-type__fd">
								<!-- #ifdef MP-ALIPAY -->
								<button v-if="item.price>0" open-type="getAuthorize" scope="userInfo" class="yd" @getAuthorize="goToBook(item)">预订</button>
								<!-- #endif -->
								<!-- #ifdef MP-WEIXIN || MP-TOUTIAO || H5 -->
								<button v-if="item.price>0" class="yd"  type="default" open-type="getUserInfo" @click="goToBook(item)">预订</button>
								<!-- #endif -->
								<view class="num" v-if="(item.sellprice - item.price) > 0">已减{{item.sellprice - item.price}}</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		
		<view class="module-more-bar" v-if="suitList.length > limit" @click="clickmore">
			<text class="module-more-bar__txt">查看更多房型</text>
			<text class="module-more-bar__icon iconfont">&#xe68d;</text>
		</view>
		
		<view v-if="footerBannerList.length" class="footer-ad-block">
			<block v-for="item in footerBannerList" :key="item.id">
				<image class="img" :src="item.adsrc" mode="aspectFill" @click="toAds(item)"></image>
			</block>
		</view>
		
		<view class="side-float-telphone" v-if="hotelDetail.telephone" @click="callTelPhone">
			<text class="iconfont">&#xe6f1;</text>
		</view>
		
		<!-- 底部备案信息 -->
		<st-footer-filing></st-footer-filing>
		
		<!-- 自定义tabBar -->
		<st-customize-footer></st-customize-footer>
		
		<!-- 房型弹窗 -->
		<uni-coupon ref="popup" :type="'bottom'" :zIndexMax="true">
			<st-hotel-detail-info :suitDetail="suitDetail" :price="suitDetail.price" @close="closePopup" @goToBook="goToBook"></st-hotel-detail-info>
		</uni-coupon>
		<st-screen-advertising></st-screen-advertising>
		 <!-- 营销推荐 -->	
	</view>
</template>

<script>
	import { adsPath, adsClientNo } from '@/utils/ads.js'
	import { get_date_format, bMapToQQMap } from '@/utils/utils.js'
	import {toPath} from '@/utils/toPath.js';
	import sxRate from '@/components/sx-rate/index.vue'
	import uniCoupon from '@/components/uni-popup/uni-popup.vue';
	import stHotelDetailInfo from '@/components/st-hotel-detail-info.vue'
	import stCustomizeFooter from "@/components/st-customize-footer.vue"
	export default {
		components:{
			sxRate,
			uniCoupon,
			stHotelDetailInfo,
			stCustomizeFooter
		},
		data() {
			return {
				bannerList: [],
				marketingBannerList: [],
				footerBannerList: [],
				hotelDetail: {},
				suitDetail: {},
				suitList: [],
				dayNum: 1,
				start_date: "",
				end_date: "",
				limit: 3,
				hasLogin: false,
			}
		},
		updated() {
			this.hasLogin = this.$store.state.hasLogin;
		},
		created() {
			this.start_date = get_date_format(Date.now());
			this.end_date = get_date_format(Date.now() + 60*60*24*1000);
			this.getDetail(); // 酒店详情
			this.getBanner(); // banner
			this.marketingAd(); // 营销广告位
			this.footerAd(); // 底部广告位
		},
		methods: {
			
			// banner
			async getBanner() {
				let res, client_no = adsClientNo(),
					params = {
						method: 'api/v2/system/new_ads',
						prefix: 's_index',
						client_no: client_no,
						custom_label: 'uni_index_basis_banner'
					}
				res = await this.$http(params);
				if (res.status) {
					this.bannerList = res.data;
				}
			},
			
			// 营销应用广告位
			async marketingAd() {
				let res, client_no = adsClientNo(),
					params = {
						method: 'api/v2/system/new_ads',
						prefix: 's_index',
						client_no: client_no,
						custom_label: 'uni_index_hotel_banner'
					}
				res = await this.$http(params);
				if (res.status) {
					this.marketingBannerList = res.data;
					
				}
			},
			
			// 底部广告位
			async footerAd() {
				let res, client_no = adsClientNo(),
					params = {
						method: 'api/v2/system/new_ads',
						prefix: 's_index',
						client_no: client_no,
						custom_label: 'uni_index_hotel_bottom'
					}
				res = await this.$http(params);
				if (res.status) {
					this.footerBannerList = res.data;
				}
			},
			
			// 前往广告位的页面
			toAds(item) {
				adsPath(item.adtype, item.typeid, item.proid, item.adlink, item.adname);
			},
		
			// 酒店详情
			async getDetail(){
				let infoRes, params = {
					method: "api/v2/hotel/single_hotel_detail"
				}
				infoRes = await this.$http(params);
				if (infoRes.status) {
					this.hotelDetail = infoRes.data;
					this.getSuitList(); // 酒店房型
				}
			},
			
			// 设施详情
			goToFacilities(){
				uni.navigateTo({
					url:`/subPackages/hotels/facilities?id=${this.hotelDetail.id}&rankname=${this.hotelDetail.rank_name}`
				})
			},
			
			// 跳转评论列表
			jumpComment(){
				uni.navigateTo({
					url:`/subPackages/comment/list?id=${this.hotelDetail.id}&typeid=2`
				})
			},
			
			// 地址定位
			mapLocation(){
				let map = bMapToQQMap(this.hotelDetail.lng, this.hotelDetail.lat);
				uni.openLocation({
					latitude: Number(map[1]),
					longitude: Number(map[0]),
					name: this.hotelDetail.title,
					address: this.hotelDetail.address,
					success: function() {
						
					}
				})
			},
			
			// 日期选择
			calendar(){
				uni.navigateTo({
					url: `/subPackages/hotels/calendar?start_date=${this.start_date}&end_date=${this.end_date}`
				})
			},
			
			// 获取房型
			async getSuitList() {
				let params = {
					method: 'api/v2/hotel/get_day_suitlist',
					hotel_id: this.hotelDetail.id,
					day: this.dayNum,
					start_time: this.start_date,
					end_time: this.end_date,
					single_hotel: 1
				};
				let res = await this.$http(params);
				if(res.status){
					this.suitList = res.data;
				}else{
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
			},
			
			// 房型弹窗
			hotelPopup(item){
				this.suitDetail = item
				this.$refs.popup.open()
			},
			
			// 关闭弹窗
			closePopup(){
				this.$refs.popup.close()
			},
			
			//预订
			goToBook(item){
				let startDate = (this.start_date).replace(/-/g,'/');
				let date = new Date(startDate);
				if( item.book_time && item.book_time >= (date.getTime()/1000+3600*16) ){
					return uni.showToast({
						title: `该房型请预订${item.book_time_date}后的房间`,
						icon: 'none'
					});
				}
				this.$set(item, 'productname', this.hotelDetail.title)
				this.$set(item, 'productaid', this.hotelDetail.aid)
				// 将数据保存到本地
				uni.setStorageSync('hotel_booking_suit_info',item)
				toPath(`/subPackages/hotels/booking?id=${item.id}&hotel_id=${this.hotelDetail.id}&title=${this.hotelDetail.title}&dayNum=${this.dayNum}&start_date=${this.start_date}&end_date=${this.end_date}`,this,true);
			},
			
			// 拨打电话
			callTelPhone(){
				uni.makePhoneCall({
					phoneNumber: this.hotelDetail.telephone,
					complete: (res) => {
						//console.log(res)
					}
				})
			},
			
			// 查看更多
			clickmore(){
				this.limit = 100
			}
		
		}
	}
</script>

<style lang="scss" scoped>

.banner {
	.swiper, image {
		height: 400rpx;
	}
	image {
		display: block;
		width: 100%;
	}
}

/* 酒店信息 */
.hotel-info-wrapper{
	margin-top: -20rpx;
	padding: 32rpx 24rpx;
	position: relative;
	z-index: 10;
	border-top-left-radius: 24rpx;
	border-top-right-radius: 24rpx;
	background-color: $uni-bg-color;
}
.hotel-info-block{
	@include alignItems;
}
.hotel-info-block__lf{
	@include flex1
	.hd{
		.title{
			font-size: $uni-font-size-lg;
			font-weight: bold
		}
		.more{
			color: $uni-text-color-primary;
			margin-left: 16rpx;
			font-size: $uni-font-size-mini;
			.iconfont{
				vertical-align: middle;
				font-size: $uni-font-size-sm;
			}
		}
	}
	.decorate{
		color: #666;
		width: 200%;
		transform: scale(.5);
		transform-origin: left bottom;
		margin-top: -14rpx;
		font-size: 40rpx;
		font-family: Arial, Helvetica, sans-serif;
		.label{
			display: inline-block;
			padding: 0 24rpx;
			&:first-child{
				padding-left: 0;
				border-right: 1px solid #aaa;
			}
		}
	}
	.attr{
		color: #666;
		width: 200%;
		transform: scale(.5);
		transform-origin: left bottom;
		margin-top: -20rpx;
		font-size: 40rpx;
		.label{
			display: inline-block;
			margin-right: 40rpx;
			.iconfont{
				vertical-align: middle;
				margin: -4rpx 8rpx 0 0;
				font-size: 48rpx;
			}
		}
	}
}
.hotel-info-block__rg{
	padding: 16rpx 12rpx;
	text-align: center;
	border-radius: $uni-border-radius-base;
	box-shadow: 0 0 16rpx rgba(255, 119, 0, .2);
	font-family: Arial, Helvetica, sans-serif;
	background-color: $uni-bg-color;
	.score{
		display: block;
		font-size: $uni-font-size-base;
		font-weight: bold;
	}
	.txt{
		color: #666;
		display: block;
		width: 200%;
		transform: scale(.5);
		transform-origin: left bottom;
		margin-top: -28rpx;
		font-size: 40rpx;
	}
}
.address-info-block{
	@include alignItems;
	height: 88rpx;
	margin-top: 32rpx;
	padding: 0 12rpx;
	background: url("https://static.member.stourweb.cn/uniapp/static/images/map_address_bg.png") center no-repeat;
	background-size: cover;
	.hd{
		@include flex0;
		color: #b2b8bf;
	}
	.bd{
		@include flex1;
		padding: 0 12rpx;
		font-size: $uni-font-size-sm;
	}
	.fd{
		@include flex0;
		text-align: center;
		.iconfont{
			color: #ff644b;
			vertical-align: top;
		}
		.txt{
			color: #666;
			display: block;
			vertical-align: top;
			margin-top: -6rpx;
			font-size: $uni-font-size-sm;
		}
	}
}

/* 营销广告位 */
.adv-marketing-block{
	@include displayflex;
	margin-top: 24rpx;
	&__l-con{
		width: 340rpx;
		height: 298rpx;
		.img{
			width: 340rpx;
			height: 298rpx;
		}
	}
	&__r-con{
		margin-left: 22rpx;
		.t-item{
			width: 340rpx;
			height: 140rpx;
			.img{
				width: 340rpx;
				height: 140rpx;
			}
		}
		.b-item{
			@include displayflex
			width: 340rpx;
			height: 140rpx;
			margin-top: 18rpx;
			.img{
				width: 165rpx;
				height: 140rpx;
				&:first-child{
					margin-right: 18rpx;
				}
			}
		}
	}
}

/* 日期选择 */
.select-date-block{
	@include justifyspacec;
	padding: 24rpx;
	margin-top: 20rpx;
	border-bottom: 1px solid #f2f2f2;
	background-color: $uni-bg-color;
	&__bd{
		@include justifyspacec;
		width: 75%;
		.item{
			color: $uni-text-color-primary;
			font-size: $uni-font-size-sm;
			.date{
				color: #666;
				display: inline-block;
				margin-left: 20rpx;
				font-size: $uni-font-size-base;
				font-family: Arial, Helvetica, sans-serif;
			}
		}
		.night{
			color: #666;
			padding: 0 12rpx;
			border: 1px solid #bfbfbf;
			border-radius: 40rpx;
			font-size: $uni-font-size-mini;
			font-family: Arial, Helvetica, sans-serif;
		}
	}
}

.hotel-room-group{
	
}

.hotel-room-item{
	padding: 24rpx 24rpx 0;
	margin-bottom: 20rpx;
	background-color: $uni-bg-color;
	&:last-child{
		margin-bottom: 0;
	}
	&__hd{
		height: 370rpx;
		position: relative;
		.img{
			width: 702rpx;
			height: 370rpx;
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx
		}
		.info{
			height: 110rpx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 0 24rpx;
			background: -moz-linear-gradient(top, rgba(0,0,0,.05) 0%, rgba(0,0,0,.3) 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.05)), color-stop(100%,rgba(0,0,0,.3)));
			background: -webkit-linear-gradient(top, rgba(0,0,0,.05) 0%,rgba(0,0,0,.3) 100%);
			background: -o-linear-gradient(top, rgba(0,0,0,.05) 0%,rgba(0,0,0,.3) 100%);
			background: -ms-linear-gradient(top, rgba(0,0,0,.05) 0%,rgba(0,0,0,.3) 100%);
			background: linear-gradient(to bottom, rgba(0,0,0,.05) 0%,rgba(0,0,0,.3) 100%);
			.title{
				@include ellipse;
				color: $uni-text-color-inverse;
				margin-top: 20rpx;
				font-size: $uni-font-size-base;
			}
			.attr{
				color: $uni-text-color-inverse;
				margin-top: 4rpx;
				font-size: $uni-font-size-sm;
				.label{
					display: inline-block;
					margin-right: 24rpx;
					&:last-child{
						margin-right: 0;
					}
				}
				.more{
					font-size: $uni-font-size-sm;
				}
			}
		}
	}
}

.hotel-room-type{
	@include justifyspacec;
	padding: 24rpx 0;
	border-bottom: 1px solid #f2f2f2;
	&:last-child{
		border-bottom: 0;
	}
	&__bd{
		width: 50%;
		.tit{
			width: 200%;
			transform: scale(.5);
			transform-origin: left top;
			margin-bottom: -24rpx;
			font-size: 48rpx;
			.label{
				color: $uni-text-color-primary;
				display: inline-block;
				padding: 6rpx 16rpx 8rpx;
				vertical-align: middle;
				margin: -8rpx 0 0 24rpx;
				border: 1px solid $uni-text-color-primary;
				border-radius: 12rpx;
				font-size: 40rpx;
			}
		}
		.txt{
			color: #666;
			width: 200%;
			margin-bottom: -24rpx;
			transform: scale(.5);
			transform-origin: left top;
			font-size: 40rpx;
			.bk{
				margin-right: 24rpx;
				&.has{
					color: #f80;
				}
			}
		}
	}
	&__pd{
		text-align: right;
		.price{
			color: $uni-text-color-price;
			white-space: nowrap;
			font-size: $uni-font-size-sm;
			.num{
				padding: 0 4rpx;
				font-weight: bold;
				font-size: 36rpx;
				font-family: Arial, Helvetica, sans-serif;
			}
		}
		.old-price{
			color: #999;
			text-decoration: line-through;
			font-size: $uni-font-size-sm;
			font-family: Arial, Helvetica, sans-serif;
		}
	}
	&__fd{
		flex: 0 0 auto;
		width: 120rpx;
		// margin-left: 24rpx;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		border: 1px solid #ff6c06;
		border-radius: 8rpx;
		.yd{
			color: #fff;
			padding: 0;
			height: 46rpx;
			line-height: 46rpx;
			font-size: $uni-font-size-sm;
			background-color: #ff6c06;
		}
		.num{
			width: 200%;
			color: $uni-text-color-price;
			transform: scale(.5);
			transform-origin: left top;
			margin: 4rpx 0 -20rpx;
			font-size: 40rpx;
		}
	}
}

.module-more-bar {
	color: $uni-text-color-primary;
	padding: 24rpx 0;
	text-align: center;
	&__txt {
		display: inline-block;
		vertical-align: middle;
		font-size: $uni-font-size-sm;
	}

	&__icon {
		vertical-align: middle;
		margin: 6rpx 0 0 8rpx;
	}
}

.footer-ad-block{
	padding: 24rpx;
	.img{
		width: 702rpx;
		height: 160rpx;
		margin-bottom: 20rpx;
		&:last-child{
			margin-bottom: 0;
		}
	}
}

.side-float-telphone{
	width: 90rpx;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	position: fixed;
	right: 20rpx;
	bottom: 200rpx;
	border-radius: 50%;
	box-shadow: 2rpx 2rpx 20rpx 2rpx rgba(153,153,153, .5);
	background-color: rgba(255,255,255,.9);
	z-index: 99;
}
.side-float-telphone .iconfont{
	color: $uni-text-color-primary;
	font-size: 44rpx;
}

</style>
